<!doctype html>
<html lang="zh-cn">
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta
      name="viewport"
      content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"
    />
    <meta name="renderer" content="webkit" />
    <title></title>
    <link rel="stylesheet" href="/css/pintuer.css" />
    <link rel="stylesheet" href="/css/admin.css" />
    <script src="/js/jquery.js"></script>
    <script src="/js/pintuer.js"></script>
    <script src="/js/vuejs-2.5.16.js"></script>
    <script src="/js/axios-0.18.0.js"></script>
    <!-- 引入样式 -->
    <link rel="stylesheet" href="/element-ui/lib/theme-chalk/index.css" />
    <!-- 引入组件库 -->
    <script src="/element-ui/lib/index.js"></script>
  </head>
  <body>
    <div class="panel admin-panel" id="bannerListDiv">
      <div class="panel-head">
        <strong class="icon-reorder">轮播图列表</strong>
        <a href="" style="float: right; display: none">添加字段</a>
      </div>
      <div class="padding border-bottom">
        <form>
          <ul class="search" style="padding-left: 10px">
            <li>
              <a
                class="button border-main icon-plus-square-o"
                href="/banner_add.html"
                >添加轮播数据</a
              >
            </li>
            <li>搜索：</li>
            <li>
              <input
                type="text"
                placeholder="请输入搜索标题"
                class="input"
                style="width: 250px; line-height: 17px; display: inline-block"
                v-model="title"
              />
              <a class="button border-main icon-search" @click="findByPage()">
                搜索</a
              >
            </li>
          </ul>
        </form>
      </div>
      <table class="table table-hover text-center">
        <tr>
          <th width="5%">选择</th>
          <th>图片</th>
          <th>标题</th>
          <th width="10%">URL</th>
          <th width="310">操作</th>
        </tr>
        <tr v-for="banner in pagination.list">
          <td style="text-align: left; padding-left: 10px">
            <input
              type="checkbox"
              name="ids"
              v-model="ids"
              :value="banner.id"
            />
          </td>
          <td width="10%">
            <img :src="banner.picPath" alt="" width="70" height="50" />
          </td>
          <td v-text="banner.title">乌龙特工</td>
          <td v-text="banner.url">https://www.iqiyi.com/v_19rrllxz4g.html</td>
          <td>
            <div class="button-group">
              <a
                class="button border-main"
                :href="'/banner_add.html?id='+banner.id"
                ><span class="icon-edit"></span>修改</a
              >
              <a
                class="button border-red"
                href="javascript:void(0)"
                @click="deleteById(banner.id)"
              >
                <span class="icon-trash-o"></span> 删除</a
              >
            </div>
          </td>
        </tr>
        <tr>
          <td colspan="7" style="text-align: left; padding-left: 20px">
            <a
              href="javascript:void(0)"
              class="button border-red icon-trash-o"
              style="padding: 5px 15px"
              @click="deleteBatch()"
            >
              批量删除</a
            >
            <span>总记录数：{{pagination.total}}</span>
          </td>
        </tr>
        <tr>
          <td colspan="8">
            <div class="pagelist">
              <!--分页组件-->
              <el-pagination
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                :current-page="pagination.pageNum"
                :page-size="pagination.pageSize"
                :total="pagination.total"
                background
                layout="prev, pager, next"
              >
              </el-pagination>
            </div>
          </td>
        </tr>
      </table>
    </div>
    <script>
      const app = new Vue({
        el: "#bannerListDiv",
        data: {
          title: "",
          ids: [],
          pagination: {
            // 分页对象
            pageNum: 1,
            pageSize: 5,
            total: 20,
            list: [],
          },
        },
        methods: {
          // 分页查询
          findByPage() {
            axios
              .get("/banner/list", {
                params: {
                  pageNum: this.pagination.pageNum,
                  pageSize: this.pagination.pageSize,
                  title: this.title,
                },
              })
              .then((resp) => {
                if ((resp.data.code = 1)) {
                  this.pagination.total = resp.data.data.total;
                  this.pagination.list = resp.data.data.list;
                } else {
                  alert(resp.data.msg);
                }
              });
          },
          //当前页改变时调用的方法
          handleCurrentChange(pageNum) {
            //将最新页码赋值给分页对象的当前页码
            this.pagination.pageNum = pageNum;
            //重新发起分页请求
            this.findByPage();
          },
          //改变每页大小时调用的方法
          handleSizeChange(pageSize) {
            //将最新的每页大爱小赋值给分页对象的当前页码
            this.pagination.pageSize = pageSize;
            //重新发起分页请求
            this.findByPage();
          },
          deleteById(id) {
            if (confirm("确定要删除吗?")) {
              axios.delete("/banner/" + id).then((resp) => {
                if (resp.data.code == 1) {
                  const totalPage = Math.ceil(
                    (this.pagination.total - 1) / this.pagination.pageSize,
                  ); // 计算总页数
                  this.pagination.pageNum =
                    this.pagination.pageNum > totalPage
                      ? totalPage
                      : this.pagination.pageNum;
                  this.pagination.pageNum =
                    this.pagination.pageNum < 1 ? 1 : this.pagination.pageNum;
                  this.findByPage();
                } else {
                  alert(resp.data.msg);
                }
              });
            }
          },
          deleteBatch() {
            if (this.ids.length > 0) {
              if (confirm("确定要删除吗?")) {
                axios.delete("/banner/" + this.ids).then((resp) => {
                  if (resp.data.code == 1) {
                    const totalPage = Math.ceil(
                      (this.pagination.total - this.ids.length) /
                        this.pagination.pageSize,
                    ); // 计算总页数
                    this.pagination.pageNum =
                      this.pagination.pageNum > totalPage
                        ? totalPage
                        : this.pagination.pageNum;
                    this.pagination.pageNum =
                      this.pagination.pageNum < 1 ? 1 : this.pagination.pageNum;
                    this.findByPage();
                  } else {
                    alert(resp.data.msg);
                  }
                });
              }
            }
          },
        },
        created: function () {
          this.findByPage();
        },
      });
    </script>
    <script src="/js/verify.js"></script>
  </body>
</html>
